<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
    <link rel="stylesheet" href="../javascripts/lib/jqm/jquery.mobile-1.4.3.min.css"/>
    <link rel="stylesheet" href="../stylesheets/main.css"/>
    <script src="../javascripts/lib/jq/jquery-2.1.1.min.js"></script>
    <script src="../javascripts/lib/jqm/jquery.mobile-1.4.3.min.js"></script>
    <script type="text/javascript">
        $(document).on("pageshow","#pagetwo",function(){
            var reletCount = $('#reletCount').val();
            var reletCount1 = $('#reletCount1').val();
            var msg = '您好，以下内容付费后方可查看，查看全部记录支付金额为<span id="rc" style="color: #FF0000;">'+reletCount+'</span>元，即<span id="rcCount" style="color: #FF0000;">'+reletCount1+'</span>次咨询次数';
            $('#payState').html(msg);
           /* $('#rc').html(reletCount);
            $('#rcCount').html(reletCount1);*/
        });

    </script>
    <title><%=title%></title>
</head>
<body>
<div data-role="page" id="searchpage">
    <div data-role="header">
        <a class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left" id="wcback" href="#">关闭</a>
        <h1>热门话题</h1>
    </div>
    <div class="ui-content" role="main">

        <script type="text/javascript">
            var snum = 0;//标记搜索的skip
            var inum = 0;//标记初始化的skip
            var initOrSearch = 1;//标记是搜索状态还是推荐的数据
            function getPubDetail(sid){//触发加载详细记录前十条
                //alert(sid);
                $("#toPage").click();
                refreshChat(sid);
            }
            function refreshChat(sid){
                $.get('/view/pubChatDetail?sid='+sid+'&uuid='+$('#uuid').val()+'&random='+Math.random(),function(result){
                    var data = '';
                    var messageList = result[0];
                    if(result[2]!='all'){//判断是不是全部显示
                        $('#reletCount').val(result[2]);
                        $('#reletCount1').val(result[3]);
                        //alert(messageList[0].wcsessionid);
                        $('#tip2').hide();
                        $('#tip1').show();
                        $('#chatSid').val(messageList[0].wcsessionid);
                        $('#moreChat').show();
                    }else{
                        $('#moreChat').hide();
                    }
                    for(var i=0;i<messageList.length;i++){
                        if(messageList[i].send_openid==result[1]){
                            data+='<div style="white-space:pre-wrap; margin: 3px;"><span style="color: #32CD32;font-weight: 700;">问：&nbsp;</span></div>'+
                                    '<div style="white-space:pre-wrap;" >&emsp;&emsp;'+messageList[i].sendcontent+'</div>'
                        }else{
                            data+='<div style="white-space:pre-wrap; margin: 3px;"><span style="color: #4169E1;font-weight: 700;">答：&nbsp;</span></div>'+
                                    '<div style="white-space:pre-wrap;" >&emsp;&emsp;'+messageList[i].sendcontent+'</div>'
                        }
                    }

                    data = '<li><div>'+data+'</div></li>';
                    $('#chatlist').html( data );
                    $('#chatlist').listview("refresh");
                    $('#chatlist').trigger("updatelayout");
                    //alert('ssssssssssssss');

                });
            }
            function goPay(){
                /*alert($('#chatSid').val());*/
                $.post('/wcpay/chatPay',{sid:$('#chatSid').val(), uuid:$('#uuid').val()},function(data){
                        if(data=="ok"){
                            $('#payState').html('支付成功！您现在可以查看所有记录！');
                            $('#tip1').hide();
                            $('#tip2').show();
                            refreshChat($('#chatSid').val());//支付成功后刷新聊天信息
                        }else{
                            $('#payState').html('支付失败！请到“用户菜单-购买服务”续费。');
                        }
                });
            };

           $(document).ready(function() {

               $('#moreDiv').show();
               loadListView(3,0,1);
               $("#btnMore").click(function() {
                   //alert('sssssssss');
                   if(initOrSearch==1){
                       inum+=3;
                       loadListView(3,inum,1);//初始化加载更多
                   }else{
                       snum+=3;
                       loadListView(3,snum,0);//搜索数据加载更多
                   }

               });
            });

           $( document ).on( "pagecreate", "#searchpage", function() {//用户搜索时触发
               $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
                   var $ul = $( this ),
                           $input = $( data.input ),
                           value = $input.val(),
                           html = "";
                   $ul.html( "" );
                   //alert(value.length+'changdu')
                   if ( value && value.length > 2 ) {
                       //alert('sss');
                       $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                       $ul.listview( "refresh" );

                       /*$.post('/view/pubChatSearch',{search:$("#autocomplete-input").val(),init:0},function(result,status){
                           var count=1;
                           for(var i=0;i<result.length;i++){
                               count +=i;
                               html += "<li><a data-transition='pop' href='/view/pubChatDetail?sid="+result[i].wcsessionid+"'"+"><span style='color: #3CB371;font-weight:400; '>" + result[i].sendcontent + "</span></a></li>";
                           }
                           $ul.html( html );
                           $ul.listview( "refresh" );
                           $ul.trigger( "updatelayout");
                       });*/
                       initOrSearch=0;
                       loadListView(3,0,0);
                       //alert('改变  '+initOrSearch);
                   }else if(value.length==0){
                       inum = 0;
                       initOrSearch=1;
                       loadListView(3,0,1);
                   }
               });
           });

            function loadListView(num,snum,init){
                $.post('/view/pubChatSearch?random='+Math.random(),{search:$("#autocomplete-input").val(),init:init,num:num,snum:snum},function(result,status){
                    var html = '';
                    var count=1;
                    if(result.length<3&&result.length>0){
                        $('#moreDiv').hide();
                    }else if(result.length==0){
                        $('#moreDiv').hide();
                    }else{
                        $('#moreDiv').show();
                    }
                    for(var i=0;i<result.length;i++){
                        count +=i;
                        var sid = result[i].wcsessionid
                       html += "<li><a data-transition='pop' href='javascript:void(0)' onclick='getPubDetail(\""+sid+"\")'><span style='color: #3CB371;font-weight:400; '>" + result[i].sendcontent + "</span></a></li>";
                        /*html += "<li><a data-transition='pop' href='/view/pubChatDetail?sid="+result[i].wcsessionid+"'"+"><span style='color: #3CB371;font-weight:400; '>" + result[i].sendcontent + "</span></a></li>";*/
                    }
                    if(snum>0){
                        //alert('新增');
                        $('#autocomplete').append( html );
                    }else{
                        //alert('初始化')
                        $('#autocomplete').html( html );
                    }

                    $('#autocomplete').listview( "refresh" );
                    $('#autocomplete').trigger( "updatelayout");

                });
            }

           $("#wcback").click(function(){
                WeixinJSBridge.call('closeWindow');//微信内置浏览器关闭当前页面
           });
        </script>

        <form class="ui-filterable">
            <input id="autocomplete-input" placeholder="搜索内容..." data-type="search">
        </form>
        <ol id="autocomplete" data-role="listview" data-inset="true" data-input="#autocomplete-input" data-filter="true"></ol>
        <div id="moreDiv" style="margin-top: 15px;">
            <button id="btnMore" data-icon="refresh">
                显示更多
            </button>
        </div>
        <a id="toPage" href="#pubChatDetailPage" style="display: none;">to page</a>
        <input id="uuid" type="hidden" value="<%=uuid%>">
        <!--<a href="#pagetwo" data-rel="dialog" data-transition="slidedown">Go to Page Two</a>-->
    </div>
</div>




<div data-role="page" id="pubChatDetailPage">
    <div data-role="header">
        <a class="ui-btn ui-icon-back ui-btn-icon-left" href="#searchpage">返回</a>
        <h1>会话记录</h1>
    </div>
    <div class="ui-content" role="main">
        <ul id="chatlist" data-role="listview" data-inset="true" >

        </ul>
        <div id="moreChat" style="margin-top: 20px;">
            <a  data-role="button" data-icon="refresh"  data-iconpos="left"  href="#pagetwo" data-rel="dialog" data-transition="slidedown">
                显示更多
            </a>

            <input id="reletCount1" type="hidden" value=""/>
            <input id="reletCount" type="hidden" value=""/>
            <input id="chatSid" type="hidden" value=""/>
        </div>

    </div>
</div>



<div data-role="page" id="pagetwo" data-close-btn="right" data-overlay-theme="d">
    <div data-role="header">
        <h1>提示</h1>
    </div>

    <div data-role="content">
        <p><h4></h4></p>
        <h1>扣费提醒</h1>
        <p><span id="payState">您好，以下内容付费后方可查看，查看全部记录支付金额为<span id="rc" style="color: #FF0000;"></span>元，即<span id="rcCount" style="color: #FF0000;"></span>次咨询次数</span></p>
        <div id="tip1">
            <a href="#searchpage" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">了解了</a>
            <a id="goPay" href="javascript:void(0)" onclick="goPay()" class="ui-btn ui-shadow ui-corner-all ui-btn-b">去支付</a>
        </div>
        <div id="tip2" style="display: none;">
            <a href="#searchpage" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">返回</a>
        </div>

    </div>

</div>


</body>
</html>